<template>
	<view class="qg">
		<custom-simple-nav title='发布染整信息'></custom-simple-nav>
		<view class="main">
			<form @submit="formSubmit" @reset="formReset">
				<view class="qg-item">
					<view class='item-title'>类目</view>
					<view class="item-input">
						<radio-group @change='typeChange' name='production_type'>
							<label class="radio" v-for="(item,index) in productionTypeArray" :key='index'>
								{{item.name}}
								<radio :value="item.value" :checked="index == currentTypeIndex" color='#CF5315' />
							</label>
						</radio-group>
					</view>
				</view>
				
				<view class="qg-item">
					<view class='item-title must'>类别</view>
					<picker :value="index" :range="classList" range-key="title" @change="cateChange" name='cate_id'>
						<view class="uni-input">{{classList[index].title}}</view>
					</picker>
				</view>
			
				<view class="qg-item desc">
					<view class='item-title must'>描述</view>
					<view class="item-input desc-textarea">
						<textarea placeholder="请详细描述,最多280字" name='desc' />
						</view>
				</view>
				
				<view class="qg-item qg-image">
					<view class="item-txt">
						<view class="">图片上传</view>
						<view class="">{{total}}/8</view>
					</view>
					<view class="item-image">
						<view class="images">
							<image src="/static/icon/upload.png" mode=""></image>
						</view>
					</view>
				</view>
				
				<view class="lx">
					<view class='lx-title'>联系方式</view>
					<view class="item-lx lx-title">
						<view>姓名：卢勇</view>
						<view>电话：18654123658</view>
					</view>
					<view class="lx-title">地址：安徽省合肥市瑶海区北二环1009号</view>
				</view>
				<button form-type="submit" type="default" class="issue-btn">立即提交</button>
			</form>
		</view>
	</view>
</template>

<script>
	import customSimpleNav from '@/components/custom-simple-nav/custom-simple-nav.vue';
	export default {
		data() {
			const currentDate = this._getDate({
				format: true
			})
			return {
				index: 0,
				classList: [],
				date: currentDate,//默认
				productionTypeArray: [{ //供货周期
						value: 1,
						name: '找单'
					},
					{
						value: 2,
						name: '发单'
					}
				],
				currentTypeIndex: 0, //默认选中供货周期
				production_type:'',
				cate_id:'',//分类id
				total:0,//已上传的图片

			}
		},
		onLoad() {
			this.getCateList();
		},
		methods: {
			//获取分类
			getCateList() {
				this.$untils.request({
					url: 'api/cate/getCateList',
					method: 'post',
					data: {
						class_id: 2
					}
				}).then(res => {
					if (res.code == -1) {
						this.$untils.toast({
							title: res.msg
						});
						return;
					}
					this.classList = res.data;
				})
			},
		
			//选择分类
			cateChange(e){
				let index = e.detail.value;
				this.index = index;
				let cate_id = this.classList[index].id;
			},
			//选择时间
			dateChange(e) {
				let selectedDate = e.detail.value;
				this.date = selectedDate;
			},
			//选择供货周期
			typeChange(e) {
				this.production_type = e.detail.value;
			},
			//表单提交
			formSubmit(e) {
				
				let form = e.detail.value;
				
				form.cate_id = this.classList[form.cate_id].id;
				console.log('form:',form);
				if(form.desc == ''){
					this.$untils.toast({title:'描述不能为空'});return;
				}
				
				
			},
			//设置开始,结束时间
			_getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

		},
		computed: { //计算属性
			startDate() {
				return this._getDate('start');
			},
			endDate() {
				return this._getDate('end');
			}
		},
	}
</script>

<style>
	.main {
		width: 100%;
		height: 600upx;
		font-size: 28upx;
		color: #777;
	}

	input {
		font-size: 28upx;
		text-align: right;
	}
	
	textarea{
		font-size: 28upx;
		text-align: left;
	}

	.qg-item {
		border-top: 20upx solid #EEEEEE;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30upx 20upx;
	}
	
	.qg-image{
		flex-direction: column;
	}

	.qg-item .item-title {
		width: 200upx;
	}
	
	.qg-item .item-txt{
		width: 100%;
		height: 30upx;
		display: flex;
		justify-content: space-between;
		padding: 10upx;
		margin-bottom: 10upx;
	}
	
	.qg-item .item-image{
		width: 100%;
		height: 200upx;
		padding: 10upx;
	}
	
	.item-image .images{
		width: 200upx;
		height: 200upx;
		border: 4upx solid #ddd;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.images image{
		width: 160upx;
		height: 160upx;
	}
	
	.desc{
		align-items: flex-start;
	}
	
	.lx{
		border-top: 20upx solid #EEEEEE;
		display: flex;
		flex-direction: column;
		padding: 20upx;
		height: 300upx;
		
	}
	.lx .item-lx{
		display: flex;
		justify-content: space-between;
		
	}
	
	.lx .lx-title{
		margin-bottom: 20upx;
		padding: 0 10upx;
	}
	
	.desc .desc-textarea{
		margin-left: 40upx;
	}
	
	.qg-item .item-input {
		flex: 1;
		text-align: right;
		font-size: 10upx;
	}

	.qg-item .item-input .radio {
		font-size: 28upx;
		margin: 0 20upx;
	}

	.qg-item .item-input .radio radio {
		margin-left: 20upx;
	}
	
	.issue-btn{
		background-color: #C42D18;
		font-size: 32upx;
		color: #FFFFFF;
		position: fixed;
		bottom: 0upx;
		z-index: 999;
		width: 100%;
	}
</style>
